import React,{useState,useEffect} from 'react';
import { Button } from 'antd-mobile';
import { BrotherStore } from '../../../store/index';
import { sendBrotherOne } from '../../../store/action';
export default function ReactChild (props){
    const msg = {
        ing:'正在等待父组件传值----',
        end:'我已经接收到了----',
    }
    const [reduxSendOne,changeReduxSendOne] = useState(BrotherStore.getState());
    BrotherStore.subscribe(()=>{
      
        changeReduxSendOne(BrotherStore.getState())
    })
    return(
        <div style={{marginTop:'10px'}}>
            <div style={{display:props.type=='parent'?'block':'none'}}>
                 <p>{props.msg?msg.end+props.msg:msg.ing}</p>
            </div>
            <div style={{display:props.type=='mySelf'?'block':'none'}}>
                 <Button onClick={()=>{props.onClick('我是从子组件过来的')}} style={{marginTop:'20px'}} className="btn" size="small" type="primary">点击事件传值</Button>
                 <Button onClick={()=>{props.change('我是自定义事件')}} style={{marginTop:'20px'}} className="btn" size="small" type="primary">自定义事件传值</Button>
            </div>
            <div style={{display:props.type=='brother'?'block':'none'}}>
                 <p>{props.brother}</p>
                 <br/>
                 <p>{'redux传递---'+reduxSendOne}</p>
                 <Button onClick={()=>{props.onClick()}}  style={{marginTop:'20px'}} className="btn" size="small" type="primary">通过父级传给兄弟二</Button>
                 <Button onClick={()=>{
                     BrotherStore.dispatch(sendBrotherOne('我是从兄弟一过来的'))
                 }} style={{marginTop:'20px'}} className="btn" size="small" type="primary">redux传值兄弟二</Button>
            </div>
        </div>
    )
}